import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Icon } from '/@/components/Icon';
import { MenuTypeEnum, DataStatusEnum, ButtonTypeEnum } from '/@/enums/sysEnum';
import { getDictDetailListApi } from '/@/api/sys/dict';

const isModule = (type: number) => type === MenuTypeEnum.DIRECTOR;
const isMenu = (type: number) => type === MenuTypeEnum.MENU;
const isButton = (type: number) => type === MenuTypeEnum.BUTTON;

export const Permission = {
  ADD: 'menu.add',
  EDIT: 'menu.edit',
  DEL: 'menu.del',
};

export const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'title',
    width: 200,
    align: 'left',
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 50,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.icon });
    },
  },
  {
    title: '路径',
    dataIndex: 'path',
  },
  {
    title: '编号',
    dataIndex: 'code',
  },
  {
    title: '组件',
    dataIndex: 'component',
  },
  {
    title: '排序',
    dataIndex: 'orderNum',
  },
  {
    title: '类型',
    dataIndex: 'menuType',
  },
  {
    title: '状态',
    dataIndex: 'state',
  },
  {
    title: '创建时间',
    dataIndex: 'createAt',
    width: 180,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'title',
    label: '名称',
    component: 'Input',
    colProps: { span: 6 },
  },
  {
    field: 'state',
    label: '状态',
    component: 'ApiSelect',
    componentProps: {
      api: getDictDetailListApi,
      params: {
        code: 'data_status',
      },
    },
    colProps: { span: 6 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'menuType',
    label: '类型',
    component: 'ApiRadioGroup',
    componentProps: {
      api: getDictDetailListApi,
      params: {
        code: 'menu_type',
      },
      isBtn: true,
    },
    defaultValue: MenuTypeEnum.DIRECTOR,
  },
  {
    field: 'state',
    label: '状态',
    component: 'ApiRadioGroup',
    componentProps: {
      api: getDictDetailListApi,
      params: {
        code: 'data_status',
      },
      isBtn: true,
    },
    defaultValue: DataStatusEnum.NORMAL,
  },
  {
    field: 'title',
    label: '名称',
    component: 'Input',
    rules: [
      { required: true, message: '请填写名称' },
      { max: 100, message: '名称最多100字' },
    ],
  },
  {
    field: 'parentId',
    label: '上级菜单',
    component: 'TreeSelect',
    componentProps: {
      fieldNames: {
        key: 'menuId',
        value: 'menuId',
        label: 'title',
        children: 'children',
      },
      getPopupContainer: () => document.body,
    },
    required: ({ values }) => !isModule(values.menuType),
    ifShow: ({ values }) => !isModule(values.menuType),
  },
  {
    field: 'orderNum',
    label: '排序',
    component: 'InputNumber',
    rules: [
      { required: true, message: '请填写排序' },
      { type: 'number', min: 0, max: 999, message: '排序在0-999之间' },
    ],
  },
  {
    field: 'path',
    label: '路径',
    component: 'Input',
    rules: [
      { required: true, message: '请填写路径' },
      { max: 100, message: '路径最多100字' },
    ],
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'component',
    label: '组件',
    component: 'Input',
    rules: [
      { required: true, message: '请填写路径' },
      { max: 100, message: '路径最多100字' },
    ],
    ifShow: ({ values }) => isMenu(values.menuType),
  },
  {
    field: 'icon',
    label: '图标',
    component: 'IconPicker',
    required: ({ values }) => !isButton(values.menuType),
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'code',
    label: '编号',
    component: 'Input',
    rules: [
      { required: true, message: '请填写编号' },
      { max: 100, message: '编号最多100字' },
    ],
    ifShow: ({ values }) => isButton(values.menuType),
  },
];

/**
 * 新增增删改查按钮菜单表单字段
 */
export const crudFormSchema: FormSchema[] = [
  {
    field: 'title',
    label: '菜单名称',
    component: 'Input',
    dynamicDisabled: true,
  },
  {
    field: 'code',
    label: '编号前缀',
    component: 'Input',
    rules: [
      { required: true, message: '请填写编号前缀' },
      { max: 50, message: '编号前缀最多50字' },
    ],
  },
  {
    field: 'buttonTypes',
    label: '按钮类型',
    component: 'CheckboxGroup',
    rules: [{ required: true, message: '请选择需要生成的按钮类型' }],
    helpMessage: ['每个选项对应增删改查的一个按钮菜单', '每个菜单仅能生成一次增删改查按钮菜单'],
    defaultValue: [
      ButtonTypeEnum.ADD,
      ButtonTypeEnum.DEL,
      ButtonTypeEnum.EDIT,
      ButtonTypeEnum.QUERY,
      ButtonTypeEnum.DETAIL,
      ButtonTypeEnum.LIST,
    ],
    componentProps: {
      options: [
        { label: '新增', value: ButtonTypeEnum.ADD },
        { label: '删除', value: ButtonTypeEnum.DEL },
        { label: '修改', value: ButtonTypeEnum.EDIT },
        { label: '查询', value: ButtonTypeEnum.QUERY },
        { label: '详情', value: ButtonTypeEnum.DETAIL },
        { label: '集合', value: ButtonTypeEnum.LIST },
        { label: '导入', value: ButtonTypeEnum.IMPORTS },
        { label: '导出', value: ButtonTypeEnum.EXPORTS },
      ],
    },
  },
];
